<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>map demo</title>
    <link rel="stylesheet" href="../js/lib/ol4.6.4/ol.css" type="text/css">
    <link rel="stylesheet" href="../css/demo.css" type="text/css">
</head>
<body>
<div id="map">
    <div id="popup" class="ol-popup">
        <a href="#" id="popup-closer" class="ol-popup-closer"></a>
        <div id="popup-title" class="popup-title"></div>
        <div id="popup-content" class="popup-content"></div>
    </div>
</div>
<script src="../js/lib/ol4.6.4/ol.js"></script>
<script src="../js/lib/jquery/jquery-3.3.1.min.js"></script>
<script src="../js/lib/echarts/echarts.min.js"></script>
<script>
    var view = new ol.View({
        zoom: 4,
        center:ol.proj.transform([110, 39],"EPSG:4326", "EPSG:3857")
    });

    var map = new ol.Map({
        controls: ol.control.defaults({
            attribution: false
        }).extend([]),
        target: "map",
        layers: [
            getTdtLayer("vec_w"),
            getTdtLayer("cva_w")
        ],
        view: view
    });

    setTimeout(addMapChart, 1000);

    function addMapChart(){
        var chartData = [
            {
                "name": "乌鲁木齐",
                "x": 87.5758285931,
                "y": 43.782211646,
                "data": [
                    {
                        "name": "男",
                        "value": 40
                    },
                    {
                        "name": "女",
                        "value": 60
                    }
                ]
            },
            {
                "name": "拉萨",
                "x": 91.162997504,
                "y": 29.7104204643,
                "data": [
                    {
                        "name": "男",
                        "value": 45
                    },
                    {
                        "name": "女",
                        "value": 55
                    }
                ]
            },
            {
                "name": "北京",
                "x": 116.4575803581078,
                "y": 40.04054437977018,
                "data": [
                    {
                        "name": "男",
                        "value": 35
                    },
                    {
                        "name": "女",
                        "value": 65
                    }
                ]
            },
            {
                "name": "兰州",
                "x": 103.584297498,
                "y": 36.1190864503,
                "data": [
                    {
                        "name": "男",
                        "value": 44
                    },
                    {
                        "name": "女",
                        "value": 56
                    }
                ]
            }
        ];
        for(var i=0, len = chartData.length;i<len;i++){
            var _d = chartData[i];
            var _coord = ol.proj.fromLonLat([_d.x, _d.y]);
            var _dom = $("<div/>").addClass("map-chart");
            var _overlay = new ol.Overlay({
                element: _dom[0],
                positioning:"center-center",
                position: _coord
            });
            map.addOverlay(_overlay);
            addChart(_dom[0], _d.data);
        }
    }

    function addChart(dom, data) {
        var chart = echarts.init(dom);
        var option = {
            // renderAsImage:true,
            animation:true,
            tooltip : {
                trigger: 'item',
                formatter: "{b}:{c}"
            },
            series : [
                {
                    type:'pie',
                    radius : '100%',
                    center: ['50%', '50%'],
                    itemStyle:{
                        normal: {
                            labelLine:{show: false}
                        }
                    },
                    data:data,
                    line:false
                }
            ]
        };
        chart.setOption(option);
    }

    function getTdtLayer(lyr){
        var url = "http://t0.tianditu.com/DataServer?T="+lyr+"&X={x}&Y={y}&L={z}&tk=16c5722fed64bcdbb390cc21a5548cf9";
        var layer = new ol.layer.Tile({
            source: new ol.source.XYZ({
                url:url
            })
        });
        return layer;
    }
</script>
</body>
</html>
